<template>
<div>
<div>
    <Top/>
</div>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css">
</head>
<body>
<div th:replace="common/top"/>
<div id="Content">
    <div id="Catalog">

        <h2 th:text="${product.name}">{{items[0].productName}}</h2>

        <table>
            <tr>
                <th>Item ID</th>
                <th>Product ID</th>
                <th>name</th>
                <th>List Price</th>
                <th></th>
            </tr>
            <!-- <tr th:each="item:${itemList}">
                <td> <a th:href="@{'/catalog/viewItem'(itemId=${item.itemId})}"  th:text="${item.itemId}" ></a></td>
                <td th:text="${item.product.productId}"></td>
                <td th:text="${item.product.name}"></td>
                <td th:text="${item.listPrice}"></td>
                <td><a th:href="@{'/cart/addItemToCart'(itemId=${item.itemId})}">Add to Cart</a></td>
            </tr> -->
            <tr v-for="item in items">
                <td> <a :href="'/catalog/newitem/'+item.itemId">{{item.itemId}}</a></td>
                <td>{{item.productId}}</td>
                <td>{{item.productName}}</td>
                <td>{{item.listPrice}}</td>
                <td><a href="">Add to Cart</a></td>
            </tr>

        </table>
    </div>
</div>
</body>
</html>
<div >
    <Bottom/>
</div>
</div>
</template>
<script>
import Top from '../../common/top'
import Bottom from '../../common/bottom'
export default({
 name: "category",
    data() {
        return {
            status:"0",
            items:[]
        }
    },
    created () {
        const _this = this
        //这句话将route中的参数传递到category中
         var urll = this.$route.params.ProductId
         console.log(urll)
        axios.get("http://localhost:8081/catalog/products/"+urll+"/items").then(function(resp){
              console.log(resp)
              _this.items = resp.data.data
          })  
    },
     components: {
         Bottom,
        Top
       
    }
})
</script>

<style scoped>

</style>